<template>
  <el-row>
    <el-col :span="4">
      <!--<el-button type="primary">-->
      <!--下载报告<el-icon class="el-icon&#45;&#45;right"><Upload /></el-icon>-->
      <!--</el-button>-->
    </el-col>
    <el-col :span="12"><h2 class="header">用户报告</h2></el-col>
    <el-col :span="4">
      <el-button type="primary">
      返回<el-icon class="el-icon--right"><Upload /></el-icon>
      </el-button>
    </el-col>
  </el-row>

  <h3 class="partview"><el-icon><Tickets /></el-icon> 考生信息</h3>
  <el-descriptions
    class="margin-top"
    :column="2"
    size="large"
    style="blockMargin"
  >
    <el-descriptions-item label="用户名">{{usermessage.username}}</el-descriptions-item>
    <el-descriptions-item label="投递编号">{{usermessage.postid}}</el-descriptions-item>
    <el-descriptions-item label="邮箱">{{usermessage.email}}</el-descriptions-item>
    <el-descriptions-item label="职位">{{usermessage.job}}</el-descriptions-item>
    <el-descriptions-item label="地区">{{usermessage.place}}</el-descriptions-item>
    <el-descriptions-item label="作答设备">{{usermessage.divice}}</el-descriptions-item>
    <el-descriptions-item label="做题时间">{{usermessage.testtime}}</el-descriptions-item>
  </el-descriptions>
  <br>
  <h3 class="partview"><el-icon><Tickets /></el-icon> 综合评价</h3>
  <div class="common-layout">
    <el-container>
      <el-aside width="70%">
        <Zzpicture/>
      </el-aside>
      <el-main>综合评价：{{comment}}</el-main>
    </el-container>
  </div>
  <h3 class="partview"><el-icon><Tickets /></el-icon> 离开页面详情</h3>
  <el-table :data="testTable" style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="time" label="时间" width="360" />
    <el-table-column prop="continue" label="持续时长" width="180" />
    <el-table-column prop="problem" label="所在题目" width="180" />
    <el-table-column prop="text" label="描述" width="180" />
  </el-table>
  <br>
  <h3 class="partview"><el-icon><Tickets /></el-icon> 成绩详情</h3>
    <el-table :data="scoreTable" style="width: 100%">
      <el-table-column prop="type" label="题型" width="180" />
      <el-table-column prop="score" label="得分" width="180" />
      <el-table-column prop="total_score" label="满分" width="180" />
      <el-table-column prop="right_ques" label="正确题数" width="180" />
      <el-table-column prop="total_ques" label="总题数" width="180" />
      <el-table-column prop="rank" label="排名" width="180" />
      <el-table-column prop="total_rank" label="排名总人数" width="180" />
      <el-table-column prop="test_time" label="用时" width="180" />
      <el-table-column prop="marking" label="是否阅卷" width="180" />
    </el-table>
    <br>
    <h3 class="partview"><el-icon><Tickets /></el-icon> 历史成绩记录</h3>
    <el-table :data="historyScoreTable" style="width: 100%">
      <el-table-column prop="num" label="序号" width="180" />
      <el-table-column prop="name" label="试卷名称" width="180" />
      <el-table-column prop="rank" label="排名" width="180" />
      <el-table-column prop="total_score" label="总得分" width="180" />
      <el-table-column prop="detail" label="得分详情" width="180" />
      <el-table-column prop="fraud_reason" label="作弊嫌疑" width="180" />
      <el-table-column prop="test_time" label="安排笔试时间" width="180" />
      <el-table-column prop="submit_time" label="交卷时间" width="180" />
    </el-table>
    <br>
    <h3 class="partview"><el-icon><Tickets /></el-icon> 技能图谱</h3>
      <Skillpicture/>
    <br>
    <h3 class="partview"><el-icon><Tickets /></el-icon> 编程能力</h3>
    <div><Radar/></div>


</template>

<script setup>
import Radar from '../components/Radar.vue'
import { reactive} from 'vue'
import Skillpicture from '../components/Skillpicture'
import Zzpicture from '../components/zzpicture.vue'

    name: "echartsBox"
    components:{Radar,Zzpicture,Skillpicture}

    let usermessage = reactive({
      username:'张三',
      postid:'123455678',
      email:'1548151231@qq.com',
      job:'软件工程师',
      place:'上海',
      divice:'Windows 10 | Chrome',
      testtime:'01:54:39(2023-05-26 15:07:00开始答题，17:01:40交卷)',
      comment:'在本次考试中，考生总成绩为50.0分/150分，排名200，排名 前78%，编程能力良好(2题通过，分数排名前71%)，编程 思路基本一致，编程规范性一般。该考生在本次考试中无作弊 情况。'
    })
    let testTable= reactive([
      { id:'00001',
        time: '2023-11-15 16:00',
        continue:'00:00:09',
        problem: '选择题题1',
        text:'跳出页面'
      },
      { id:'00002',
        time: '2023-11-15 16:02',
        continue:'00:00:05',
        problem: '选择题题3',
        text:'跳出页面'
      },
      { id:'00003',
        time: '2023-11-15 16:02',
        continue:'00:00:09',
        problem: '选择题题5',
        text:'跳出页面'
      },
      { id:'00004',
        time: '2023-11-15 16:04',
        continue:'00:00:11',
        problem: '选择题题5',
        text:'跳出页面'
      },
    ])
    //
    let scoreTable= reactive(
      [
      {
            type: '选择题',
            score: 15,
            total_score: 30,
            right_ques: 5,
            total_ques: 10,
            rank: 230,
            total_rank: 255,
            test_time: '00:09:01',
            marking:'right'
          },
          {
            type: '编程题',
            score: 35,
            total_score: 70,
            right_ques: 2,
            total_ques: 4,
            rank: 176,
            total_rank: 254,
            test_time: '01:41:50',
            marking:'right'
          },
          {
            type: '加分题',
            score: 0,
            total_score: 50,
            right_ques: 0,
            total_ques: 2,

            total_rank: 196,
            test_time: '00:00:00',
            marking:'right'
          }
      ])

    let historyScoreTable= reactive(
      [
        {
            num:"1",
            name:"测试-中级",
            rank:"28%",
            total_score:"60/100",
            detail:"单选60，编程：0",
            fraud_reason:"否",
            test_time:"2022-06-16 10:46:21",
            submit_time:"2022-06-17 10:15:21"
        },
        {
            num:"2",
            name:"测试-中级（周六）",

            total_score:"未到场",


            test_time:"2022-06-24 10:46:21",

        },
        {
            num:"3",
            name:"测试-中级（周五）",
            rank:"100%",
            total_score:"57/100",
            detail:"单选57，编程：0",
            fraud_reason:"否",
            test_time:"2022-06-24 11:41:41",
            submit_time:"2022-06-24 21:00:57"
        },
        {
            num:"4",
            name:"算法课01-数组与链表计算题",
            rank:"45%",
            total_score:"100/140",
            detail:"编程：100",
            fraud_reason:"是，摄像头监控异常，视频监控异常",
            test_time:"2023-03-08 10:15:50",
            submit_time:"2023-03-08 10:44:59"
        },])
</script>

<style scoped>
.header {
   color: #454;
   margin: 0 0 20px;
   align-content: center;
   margin-left: 45%;
   margin-right: 30%;

    }
    .partview {
        color: #454;
        margin: 0 0 20px;
        border-bottom: 1px solid #dedede;
    }
    .el-descriptions {
      margin-top: 20px;
    }
    .cell-item {
      display: flex;
      align-items: center;
    }
    .margin-top {
      margin-top: 20px;
    }
</style>
